<template>
  <div class="body">
    <el-row>
      <el-col :span="3"> 
        <!-- <el-input v-model="sear.name" placeholder="请输入菜单名称"></el-input> -->
      </el-col>
      <el-col :span="4">
        <!-- <el-button @click="menu_click" icon="el-icon-search"  class="add_btn"> 搜索</el-button> -->
        <el-button @click="add_meun" icon="el-icon-plus" class="add_btn">新增权限</el-button>
      </el-col>
    </el-row>

    <el-table v-if="refreshTable" :data="tableData" row-key="id" :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="title" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center" width="100">
        <template slot-scope="scope">
          <svg-icon :icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="60"></el-table-column>
      <el-table-column prop="route" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
      <!-- <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
            </template>
          </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)">新增</el-button>
          <el-button @click="set_meun(scope.row)" icon="el-icon-edit" type="text">编辑</el-button>
          <el-popconfirm confirm-button-text='取消' cancel-button-text='不用了' icon="el-icon-info" icon-color="red"
            title="是否删除这个菜单？" @confirm='del_meun(scope.row)'>
            <el-button slot="reference" type="text" icon="el-icon-delete"> 删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background @prev-click='prev'
        @next-click='next' :current-page.sync="page" :page-size="per_page" layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="title_meun" :visible.sync="isset_menu" width="30%" :close-on-click-modal='false' @close='dialog_close'>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="菜单类型" prop="is_menu">
          <el-radio-group v-model="ruleForm.is_menu">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="ruleForm.name"  @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="route">
          <el-input v-model="ruleForm.route"  @input="changeValue"></el-input>
        </el-form-item>

        <el-form-item label="路由地址" prop="path" v-if="ruleForm.is_menu==1">
          <el-input v-model="ruleForm.path"  @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="页面地址" prop="component" v-if="ruleForm.is_menu==1">
          <el-input v-model="ruleForm.component"  @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="ruleForm.description"  @input="changeValue"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单" prop="pid">
          <treeselect v-model="ruleForm.pid" :options="menuOptions" :normalizer="normalizer" :show-count="true"
            placeholder="选择上级菜单" />
        </el-form-item>
        <el-form-item label="图标" prop="icon" v-if="ruleForm.is_menu==1">
          <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="ruleForm.icon" placeholder="点击选择图标" readonly>
              <svg-icon v-if="ruleForm.icon" slot="prefix" :icon-class="ruleForm.icon" class="el-input__icon"
                style="height: 32px;width: 16px;" />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="ruleForm.sort" controls-position="right" :min="0"  @input="changeValue" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getNodeList,
    createNode,
    delNode
  } from "@/api/role/index"

  import IconSelect from "@/components/IconSelect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Treeselect from "@riophae/vue-treeselect";
  export default {
    components: {
      Treeselect,
      IconSelect
    },
    data() {
      return {
        sear:{
          name:''
        },
        // 显示搜索条件
        showSearch: true,
        // 查询参数
        queryParams: {
          name: undefined
        },
        // 是否显示弹出层
        open: false,
        // 遮罩层
        loading: true,
        refreshTable: true,
        // 是否展开，默认全部折叠
        isExpandAll: false,
        tableData: [],
        per_page: 10,
        page: 1,
        total: 0,
        isset_menu: false,
        title_meun: '',
        ruleForm: {
          component:'Layout',
          name: '',
          path: '',
          route: '',
          description: '',
          pid: '',
          icon: '',
          sort: '',
          is_menu: 1,
          id: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入权限名称',
            trigger: 'blur'
          }],
          path: [{
            required: true,
            message: '请输入前端路由',
            trigger: 'blur'
          }],
          description: [{
            required: true,
            message: '请选择类型',
            trigger: 'blur'
          }],
          pid: [{
            required: true,
            message: '请选择父级菜单',
            trigger: 'blur'
          }],
          icon: [{
            required: true,
            message: '请选择图标',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '请输入序号',
            trigger: 'blur'
          }],
          is_menu: [{
            required: true,
            message: '请选择模式',
            trigger: 'blur'
          }]
        },
        // 菜单树选项
        menuOptions: [],

      }
    },
    mounted() {
      this.getlist()
      this.getTreeselect()
    },
    methods: {
      dialog_close(){
        this. ruleForm={
          component:'Layout',
          name: '',
          path: '',
          route: '',
          description: '',
          pid: '',
          icon: '',
          sort: '',
          is_menu: 1,
          id: ''
        }
      },
      changeValue(e){
        this.$forceUpdate()
      },
      /** 新增按钮操作 */
      handleAdd(row) {
      
        this.getTreeselect();
        if (row != null && row.id) {
          this.ruleForm.pid = row.id;
        } else {
          this.ruleForm.id = 0;
        }
        this.isset_menu = true
        this.title_meun = '新增权限'
      },
      handleQuery() {
        this.getlist()
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.title,
          children: node.children
        };
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        getNodeList().then(res => {
          console.log(res)
          this.menuOptions = [];
          const menu = {
            id: 0,
            title: '主类目',
            children: []
          };

          menu.children = res.data
          this.menuOptions.push(menu);
        });
      },
      // 选择图标
      selected(name) {
        this.ruleForm.icon = name;
      },
      getlist() {
        getNodeList(this.queryParams).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
            // this.total = res.msg.total
          }
        });
      },
      menu_click(){
        getNodeList(this.sear).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
            // this.total = res.msg.total
          }
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = val
        this.getlist()
      },
      prev() {
        this.page = this.page - 1
        this.getlist()
      },
      next() {
        this.page = this.page + 1
        this.getlist()
      },
      add_meun() {
        this.isset_menu = true
        this.title_meun = '新增权限'
        this.$nextTick(function() {
          this.$refs.ruleForm.resetFields()
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            createNode(this.ruleForm).then((res) => {
              if (res.code == 200) {
                this.$message.success('提交成功')
                this.isset_menu = false   
                this.getlist()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this. ruleForm={
          component:'Layout',
          name: '',
          path: '',
          route: '',
          description: '',
          pid: '',
          icon: '',
          sort: '',
          is_menu: 1,
          id: ''
        }
        this.isset_menu = false
      },
      // 编辑
      set_meun(row) {
        console.log(row)
        this.isset_menu = true
        this.title_meun = '修改权限'
        this.ruleForm = row
        this.ruleForm.name=row.title
        // this.ruleForm.component=row.component
        // this.ruleForm.component=row.component
        
      },
      // 删除
      del_meun(row) {
        let query = {
          id: row.id,
          is_del:1
        }
        delNode(query).then((res) => {
          console.log(res)
          if (res.code == 200) {
            this.$message.success('操作成功')
            this.isset_menu = false
            this.getlist()
          }
        })
      }
    }
  }
</script>

<style scoped>
  .body {
    padding: 20px;
    box-sizing: border-box;
  }

  el-table {}

  .pagination {
    text-align: center;
  }
</style>
